<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane v-for="(item,key) in form" :key="key"  :name="key.toString()">
          <span slot="label">报名人{{numToStr(key + 1)}}</span>
      </el-tab-pane>
    </el-tabs>
    <el-table :data = "form[activeName]" border size="mini">
        <el-table-column label="排序" width="50">
            <template slot-scope="item">
                <div class="sort-btn">
                    <i class="el-icon-sort"></i>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="字段名" prop="name" width="200"></el-table-column>
        <el-table-column label="提示信息"></el-table-column>
        <el-table-column label="必填" width="60">
            <template slot-scope="item">
                <el-checkbox v-model="item.row.not_null" :disabled="item.$index < 2 ? true : false"></el-checkbox>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="70">
            <template slot-scope="item">
                <el-button size="mini" icon="el-icon-delete" class="com-btn"></el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="add-btn-box">
        <el-button icon="el-icon-plus" size="small">新增报名项</el-button>
    </div>
    <div style="height:20px;"></div>
  </div>
</template>

<script>
export default {
  props: { form: {} },
  data() {
    return {
      activeName: "0"
    };
  },
  mounted() {
    console.log(this.form);
  },
  methods: {
    //数字转中文
    numToStr(num) {
      var str = "";
      switch (num) {
        case 0:
          str = "零";
          break;
        case 1:
          str = "一";
          break;
        case 2:
          str = "二";
          break;
        case 3:
          str = "三";
          break;
        case 4:
          str = "四";
          break;
        case 5:
          str = "五";
          break;
        case 6:
          str = "六";
          break;
        case 7:
          str = "七";
          break;
        case 8:
          str = "八";
          break;
        case 9:
          str = "九";
          break;
      }
      return str;
    }
  }
};
</script>

<style>
.sort-btn{cursor: move !important;width: 30px;height: 30px;border-radius: 50%;line-height: 30px;text-align: center}
.add-btn-box{
    text-align: center;margin-top:10px;
}
</style>